import { FC } from "react";
import { Typography, Space, Button, Flex, Tabs } from "antd";
import type { TabsProps } from "antd";
import { Link } from "react-router-dom";
import {
  LeftOutlined,
  EditOutlined,
  SearchOutlined,
  RedoOutlined,
  UndoOutlined,
  DeleteOutlined,
  UpOutlined,
  DownOutlined,
  CopyOutlined,
  LockOutlined,
} from "@ant-design/icons";
import { useTitle } from "ahooks";
import EditCanvas from "./EditCanvas";
import useLoadQuestionData from "@/hooks/useLoadQuestionData";
import style from "./index.module.scss";
const { Title } = Typography;
const items: TabsProps["items"] = [
  {
    key: "1",
    label: "组件",
    children: "Content of Tab Pane 1",
  },
  {
    key: "2",
    label: "层级",
    children: "Content of Tab Pane 2",
  },
];
const Edit: FC = () => {
  useTitle("编辑问卷");
  useLoadQuestionData();
  return (
    <div className={style.edit}>
      <div className={style.header}>
        <div className={style.left}>
          <Space>
            <Button type="link" icon={<LeftOutlined />}>
              <Link to="/questionnaire/list">返回</Link>
            </Button>
            <Title level={4}>编辑问卷</Title>
            <EditOutlined />
          </Space>
        </div>
        <div>
          <Flex gap="middle">
            <Button shape="circle" icon={<CopyOutlined />} />
            <Button shape="circle" icon={<SearchOutlined />} />
            <Button shape="circle" icon={<LockOutlined />} />
            <Button shape="circle" icon={<DeleteOutlined />} />
            <Button shape="circle" icon={<RedoOutlined />} />
            <Button shape="circle" icon={<UndoOutlined />} />
            <Button shape="circle" icon={<DownOutlined />} />
            <Button shape="circle" icon={<UpOutlined />} />
          </Flex>
        </div>
        <div>
          <Flex gap="small">
            <Button>primary</Button>
            <Button type="primary">primary</Button>
          </Flex>
        </div>
      </div>
      <div className={style.wrapper}>
        <div className={style.left}>
          <Tabs items={items}></Tabs>
        </div>
        <div className={style.main}>
          <div className={style.canvas_wrapper}>
            <EditCanvas></EditCanvas>
          </div>
        </div>
        <div className={style.right}>right</div>
      </div>
    </div>
  );
};

export default Edit;
